<template>
  <div>
    <el-form label-width="80px" size="mini">
      <el-form-item label="数据源">
        <data-source-btn/>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="item.backgroundColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="分页">
        <el-checkbox v-model="item.showPagination"/>
      </el-form-item>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="标题" name="dataRange">
          <vpd-text-style :item="item.title"/>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="表格配置" name="dataRange">
          <el-button icon="el-icon-setting" @click="handleConfig">配置</el-button>
          <table ref="configTable" class="form-item-config">
            <thead>
            <tr>
              <th>标题</th>
              <th>字段</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(col, $index) in item.columns" :key="$index">
              <td>{{col.name}}</td>
              <td>{{col.code}}</td>
            </tr>
            </tbody>
          </table>
        </el-collapse-item>
      </el-collapse>
      <border-style :item="item"/>

    </el-form>
    <table-config v-if="configVisible"
                  :options="{
                 columns: item.columns
                 }"
                  @close="configVisible=false"
                  @success="handleConfigOk"/>
  </div>

</template>
<script>
  import DataSourceBtn from '../../dataSource/button';
  import Style from "../../designer/components/panel/style";
  import TableConfig from "./config";
  import BorderStyle from '../styles/border';
  import VpdText from '../text/index';
  import VpdTextStyle from '../text/style';

  export default {
    name: 'vpd-table-style',
    components: {
      Style,
      DataSourceBtn,
      TableConfig,
      BorderStyle,
      VpdText,
      VpdTextStyle
    },
    props: {
      item: {
        type: Object
      }
    },
    data() {
      return {
        activeNames: ['dataRange', 'style'],

        startOffsetX: 0,
        startOffsetY: 0,
        startIndex: 0,
        dropPlace: null,
        configVisible: false,
      }
    },
    computed: {},
    watch: {
      'item.uuid': function (val) {
        this.initTitleText();
      }
    },
    beforeMount() {
      this.initTitleText();
    },
    methods: {
      initTitleText() {
        if (!this.item.title || !this.item.title.type) {
          this.item.title = VpdText.setting;
          this.item.title.text = '标题'
        }
        this.item.title.w = '100%';
        this.item.title.h = 'auto';
      },
      handleConfig() {
        this.configVisible = true;
      },
      handleConfigOk(columns) {
        this.item.columns = columns;
        this.configVisible = false;
      },
    }
  }
</script>
<style lang="scss" scoped>
  .form-item-config {
    position: relative;
    width: 99%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;

    th, td {
      border: 1px solid #ccc;
      text-align: center;
      padding: 5px;
    }

  }
</style>
